<!--
 * @Author: yuanming
 * @Date: 2024-06-30 08:01:12
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-20 13:51:47
 * @Description: fileDescription
-->
<template>
    <div class="parkMonitorLeftWarp">
        <div class="title-screen">停车场统计</div>
        <div class="block">
            <div class="blockItem">
                <img src="@/assets/images/icon14.png" alt="" />
                <div>
                    <div class="label">公共备案停车场总数</div>
                    <div class="num"><CountConponent :end-val="propsData.filingPark.parkCnt || 0" :duration="3" /></div>
                </div>
            </div>
            <div class="blockItem">
                <img src="@/assets/images/icon15.png" alt="" />
                <div>
                    <div class="label">总泊位数</div>
                    <div class="num"><CountConponent :end-val="propsData.filingPark.totalCnt || 0" :duration="3" /></div>
                </div>
            </div>
            <div class="blockItem">
                <img src="@/assets/images/icon16.png" alt="" />
                <div>
                    <div class="label">实时余位数</div>
                    <div class="num"><CountConponent :end-val="propsData.filingPark.freeNumCnt || 0" :duration="3" /></div>
                </div>
            </div>
        </div>
        <div class="title-screen">当前泊位占用变化趋势</div>
        <LineArea width="90%" height="20vh" :chartData="lineAreaData" />
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import LineArea from '@/charts/lineArea.vue'
import CountConponent from '@/components/countToComponent/index.vue'

const propsData = defineProps({
    filingPark: {
        type: Object,
        default: () => {},
    },
})

const lineAreaData = reactive({
    xData: [...new Array(24).keys()],
    sData: [
        { name: '泊位数', value: new Array(24).fill(0), color: '#65EAA2' },
    ],
    xColor: '#CDE4FF',
    yColor: '#CDE4FF',
    legendShow: false,
    grid: {
        left: '0%',
        top: '5%',
        right: '5%',
        bottom: '0%',
        containLabel: true,
    },
})

const setChartsData = (data) => {
    lineAreaData.xData = data.map((item) => item.time)
    lineAreaData.sData[0].value = data.map((item) => item.occupyNum)
}

watch(() => propsData.filingPark, (newVal) => {
    if (newVal && newVal.berthOccupyResponse && newVal.berthOccupyResponse.length > 0) {
        setChartsData(newVal.berthOccupyResponse)
    }
}, { immediate: true, deep: false })

</script>

<style lang="scss" scoped>
.parkMonitorLeftWarp {
    width: 25vw;
    height: auto;
    min-height: 40vh;
    background-image: url('@/assets/images/box_left.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 3vw;
    top: 14vh;
    padding: 1vw 1vw;
    box-sizing: border-box;
    z-index: 100;
    .block {
        width: 85%;
        height: auto;
        margin-bottom: 2vh;
        %commonBlockStyle {
            width: 90%;
            height: auto;
            margin: 2vh auto 0 auto;
            padding: 1.5vh 1.5vw;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-direction: row;
            border-radius: 5px;
            border: 2px solid #30B3FF;
            background-color: rgba(48, 179, 255, 0.10);
            img {
                width: 3vw;
                height: 3vw;
                margin-right: 1vw;
            }
            .num {
                color: white;
                font-size: 1.5vw;
                font-family: 'YouSheBiaoTiHei';
                font-weight: 400;
            }
            .label {
                font-size: 1vw;
                font-weight: 400;
                color: #98DCFC;
            }
        }
        .blockItem {
            @extend %commonBlockStyle;

        }
        .blockItem:nth-child(2) {
            border: 2px solid #30FF7D;
            background-color: rgba(43, 254, 176, 0.12);
            .label {
                color: #28D96A;
            }
        }
        .blockItem:nth-child(3) {
            border: 2px solid #B3FF5F;
            background-color: rgba(64, 254, 43, 0.12);
            .label {
                color: #92D14E;
            }
        }
    }
}
</style>
